import React from 'react';
import { useNode } from '@craftjs/core';
import settings from './gridColWrapperSettings';
import styles from './gridColWrapper.less';

const defaultMinHeight = 32;

// 容器模块
const GridColWrapper = ({ textAlign, minHeight, children }) => {
  const {
    connectors: { connect },
  } = useNode();

  return (
    <div
      ref={connect}
      style={{ minHeight: `${minHeight || defaultMinHeight}px`, textAlign }}
      className={`${styles.colContent} ${children ? null : styles.colContentPlaceholder}`}
    >
      {children}
    </div>
  );
};

GridColWrapper.craft = {
  displayName: '栅格-单元',
  props: {
    textAlign: 'center',
    minHeight: defaultMinHeight,
  },
  custom: { disabled: true },
  related: { settings },
};

export default GridColWrapper;
